<template>
  <view class="container">
    <view class="work-orders">
      <view class="card" v-for="item in details.workOrderList" :key="item.workOrderId">
        <view class="content">
          <view class="label">{{ item.workOrderTypeName }}</view>
          <view :class="{ 'work-orders-item': usePermission('svmsapp:work-order') }" @click="() => onClick(item)">
            {{ item.workOrderNo }}
          </view>
          <ve-tag :color="getColor(item.workOrderStatus)" :background="getBg(item.workOrderStatus)" :title="item.workOrderStatusName" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref, getCurrentInstance, onMounted } from 'vue'
  import { usePermission } from '@/hooks/usePermission'

  const details = ref<any>({
    workOrderList: [],
  })

  const getColor = (status: number) => {
    switch (status) {
      case 1:
        // 待指派
        return '#ff7d00'
      case 2:
        // 待处理
        return '#ff7d00'
      case 3:
        // 待开始
        return '#ff7d00'
      case 4:
        // 进行中
        return '#3491fa'
      case 5:
        // 已完成
        return '#00b42a'
      case 6:
        // 已取消
        return '#86909c'
    }
  }

  const getBg = (status: number) => {
    switch (status) {
      case 1:
        // 待指派
        return 'rgba(255, 247, 232, 1)'
      case 2:
        // 待处理
        return 'rgba(255, 247, 232, 1)'
      case 3:
        // 待开始
        return 'rgba(255, 247, 232, 1)'
      case 4:
        // 进行中
        return 'rgba(232, 243, 255, 1)'
      case 5:
        // 已完成
        return 'rgba(232, 255, 234, 1)'
      case 6:
        // 已取消
        return 'rgba(242, 243, 245, 1)'
    }
  }

  const onClick = (item: any) => {
    console.log('onClick', item)
    if (usePermission('svmsapp:work-order')) {
      uni.navigateTo({ url: `/pages/work/workOrder/list?workOrderCode=${item.workOrderNo}` })
    }
  }

  onMounted(() => {
    const instance: any = getCurrentInstance()!.proxy
    const eventChannel = instance.getOpenerEventChannel()

    eventChannel.on('acceptDataFromOpenedPage', function (data: any) {
      console.log('acceptDataFromOpenedPage', data.record)
      details.value = data.record
    })
  })
</script>

<style lang="less" scoped>
  .work-orders {
    padding: 24rpx 24rpx;

    &-item {
      color: #3072f6;
    }

    .card {
      min-height: 54px;
      background: #ffffff;
      border-radius: 4px 4px 4px 4px;
      margin-bottom: 24rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 16px;

        .label {
          font-weight: 400;
          font-size: 15px;
          color: #8491a8;
        }
      }
    }
  }
</style>
